
<template> 
  <ContentWrap>
    <el-form :model="form" label-width="120px">
      <!-- 小程序路径地址 -->
       <el-row>
        <el-col :span="12">
          <el-form-item label="小程序路径地址">
            <el-input v-model="form.miniProgramPath" :disabled="true" placeholder="请输入小程序路径地址" class="mr-2" />
            <!-- 复制 -->
          </el-form-item>
        </el-col>
        <el-col :span="4">
           <el-button type="primary" @click="copyMiniProgramPath">复制</el-button>
        </el-col>
       </el-row>
        <!-- H5路径 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="H5路径">
              <el-input v-model="form.h5Path" placeholder="请输入H5路径" class="mr-2" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- 复制 -->
              <el-button type="primary" @click="copyH5Path">复制</el-button>
          </el-col>
        </el-row>
        <!-- 背景图片 -->
         <el-row>
          <el-col :span="12">
            <!-- 建议背景图片尺寸640*1008 -->
            <el-form-item label="背景图片">
              <UploadImg v-model="form.backgroundImage" height="148px" width="148px">
                <template #tip> 建议背景图片尺寸：640*1008</template>
              </UploadImg>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
     <!-- 海报类型 -->
    <div class="p-4">
      <div class="flex items-center  mb-4"> 
        <div class="text-14px">海报类型： </div>
        <el-button type="primary" size="small" @click="addPosterType">新增</el-button>
      </div>
      <el-row>
        <el-col :span="12">
            <el-table :data="showPosterList" border>
              <el-table-column label="海报类型名称" prop="name" align="center" />
              <el-table-column label="操作" prop="action" align="center">
                <template #default="{ row }">
                  <el-button type="primary" @click="editPosterType(row)" size="small">编辑</el-button>
                  <el-button type="danger" @click="deleteType(row)" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </el-col>
      </el-row>
    </div>
    <div class="flex justify-end">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <AddPosterType v-if="addPosterVisible" :title="addPosterTitle" :currentObj="currentObj" @cancel="addPosterVisible = false" @ok="addPosterOk" :posterList="form.posterTypeList" />
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, onMounted,computed } from 'vue'
import AddPosterType from './addPostertype.vue'
import { getPosterTypeList,getPosterConfig,createPosterConfig, createPosterType, updatePosterType, deletePosterType } from '@/api/allApplication/poster/index'
const form = ref({
  miniProgramPath: '/pages/poster/index',
  h5Path: '',
  backgroundImage: '',
  posterTypeList: [],
})
const showPosterList = computed(() => {
  return form.value.posterTypeList.map((item: any) => {
    return {
      ...item,
    }
  })
})
const total = ref(0)
const addPosterVisible = ref(false)
const addPosterTitle = ref('新增海报类型')
const currentObj = ref<any>({})
const copyMiniProgramPath = () => {
  if(!form.value.miniProgramPath){
    return ElMessage.warning('小程序路径地址不能为空')
  } else{
    navigator.clipboard.writeText(form.value.miniProgramPath)
    return ElMessage.success('复制成功')
  }
}

const copyH5Path = () => {
  if(!form.value.h5Path){
    return ElMessage.warning('H5路径不能为空')
  } else {
    navigator.clipboard.writeText(form.value.h5Path)
    return ElMessage.success('复制成功')
  }
}
// const getPosterConfigList = async () => {
//   const res = await getPosterTypeList()
//   console.log('获取海报配置列表', res)
//   form.value.posterTypes = res.list
//   total.value = res.total
// }
const getPoster = async () => {
  const res = await getPosterConfig()
  console.log('获取海报配置', res)
  form.value.miniProgramPath = res.miniProgramPath || '/pages/poster/index' 
  form.value.h5Path = res.h5Path || ''
  form.value.backgroundImage = res.backgroundImage || ''
}
const addPosterType = () => {
  addPosterVisible.value = true
  addPosterTitle.value = '新增海报类型'
  currentObj.value = {}
}

const editPosterType = (row: any) => {
  addPosterVisible.value = true
  addPosterTitle.value = '编辑海报类型'
  currentObj.value = row
  console.log('编辑海报类型', row)
}

const deleteType = (row: any) => {
  ElMessageBox.confirm('确定删除该海报类型吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deletePosterType({id:row.id})
    ElMessage.success('删除成功')
    getPosterList()
  })
}

const save = async () => {
  const sendData={
    miniProgramPath: form.value.miniProgramPath,
    h5Path: form.value.h5Path,
    backgroundImage: form.value.backgroundImage,
    posterTypes: form.value.posterTypeList,
  }
  await createPosterConfig(sendData)
  ElMessage.success('保存成功')
  return
}
const addPosterOk = async (data: any) => {
  console.log('新增海报类型', data)
  addPosterVisible.value = false
  if(currentObj.value.id){
    await updatePosterType({name: data.posterTypeName,id:currentObj.value.id})
  }else{
    await createPosterType({name: data.posterTypeName})
  }
  getPosterList()
  ElMessage.success('操作成功')
}
const getPosterList = async () => {
  const list = await getPosterTypeList()
  form.value.posterTypeList = list || []
}
onMounted(() => {
  getPoster()
  getPosterList()
})
</script>